<template>
  <div class="myContainer">
    <el-tabs type="border-card">
      <el-tab-pane label="工单基础信息">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单基本信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单ID :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单ID" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            当前状态 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="当前状态" :disabled="disabled"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            是否逾期 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="是否逾期" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            所属小区 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="所属小区" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单来源 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单来源" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            上报时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="上报时间" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单相关人员信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            报修人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="报修人" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            报修人类型 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="报修人类型" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系地址 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系地址" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="责任人" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">报事事件信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            报事类型类别 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="报事类型类别" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            问题描述 :
          </el-col>
          <el-col :span="15">
            <el-input type="textarea" placeholder="问题描述" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            图片信息 :
          </el-col>
          <el-col :span="15">
            <img src="static/images/loading.gif">
            <img src="static/images/loading.gif">
            <img src="static/images/loading.gif">
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="15" :offset="3">
            <el-button type="primary" class="myBgGreen">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="预处理及指派">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">预处理信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            预处理人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="预处理人" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            操作时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="操作时间" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            处理等级 :
          </el-col>
          <el-col :span="6">
            <template>
              <el-select v-model="rankValue" placeholder="处理等级">
                <el-option
                  v-for="item in rankOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            处理截止日期 :
          </el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="date1"
              type="date"
              placeholder="截止日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理意见 :
          </el-col>
          <el-col :span="16">
            <el-input type="textarea" placeholder="处理意见"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">指派信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            派单方式 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="派单方式" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单获取时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单获取时间" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            执行人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="执行人" @focus="newExecutorDialogVisible = true"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="6" :offset="3">
            <el-button type="primary" class="myBgGreen">保 存</el-button>
            <el-button type="primary" class="myBgGreen">取 消</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="处理">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">处理人员信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="预处理人" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            操作时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="操作时间" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">处理信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理结论 :
          </el-col>
          <el-col :span="6" class="myLineHeight_45px">
            <template>
              <el-radio-group v-model="radio">
                <el-radio :label="1">已处理</el-radio>
                <el-radio :label="2">无法处理</el-radio>
                <el-radio :label="3">情况不属实</el-radio>
              </el-radio-group>
            </template>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            问题描述 :
          </el-col>
          <el-col :span="16">
            <el-input type="textarea" placeholder="问题描述"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px my">
          <el-col :span="3" class="myLeftMsg">
            图片信息 :
          </el-col>
          <el-col :span="16">
            <el-upload
              action="url"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="6" :offset="3">
            <el-button type="primary" class="myBgGreen">保 存</el-button>
            <el-button type="primary" class="myBgGreen">关 闭</el-button>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            是否重新处理 :
          </el-col>
          <el-col :span="6">
            <el-button type="primary" class="myBgGreen" @click="againDialogVisible = true">重新处理</el-button>
            <el-button type="primary" class="myBgGreen">关 闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="回访/归档" disabled></el-tab-pane>
    </el-tabs>


    <!--指派执行人员弹出框 start-->
    <el-dialog title="指派执行人员" class="myRoleDialog" :visible.sync="newExecutorDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        <el-tree
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newExecutorDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen">提 交</el-button>
      </div>
    </el-dialog>
    <!--指派执行人员弹出框 end-->

    <!--重新处理弹出框 start-->
    <el-dialog title="警告" class="myRoleDialog" :visible.sync="againDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        是否将工单号为0111111111的设备告警-严重（报事类型）报修工单发回重新处理！！！
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="againDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!--重新处理弹出框 end-->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }    
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
  }
  .mymarginTop_10px{
    padding-top: 10px;
  }
  .myLineHeight_45px{
    line-height: 45px;
  }
</style>
  
<script>

  export default {
     data(){
      return{
        disabled:true,
        rankValue:"",
        rankOptions:[],
        date1:"",
        newExecutorDialogVisible:false,
        radio:"",
        dialogImageUrl: '',
        dialogVisible: false,
        value1:4,
        againDialogVisible:false
      }
    },
    components: {
    },
    mounted(){
      document.title = '报修工单详情';
      

    },
    methods:{
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }

  }

</script>  



